import React from 'react'

const FlexBoxDirection=()=>{
  return (
    <div>
      <h2>No CSS</h2>
      <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
      </div>

      <h2>default flexDirection</h2>
      <div className="flexBox">
        <span className="flexItem">1</span>
        <span className="flexItem">2</span>
        <span className="flexItem">3</span>
        <span className="flexItem">4</span>
      </div>

      <h2>flexDirection: column</h2>
      <div className="flexBox column">
        <span className="flexItem">1</span>
        <span className="flexItem">2</span>
        <span className="flexItem">3</span>
        <span className="flexItem">4</span>
      </div>

      <h2>flexDirection: column-reverse</h2>
      <div className="flexBox column-reverse">
        <span className="flexItem">1</span>
        <span className="flexItem">2</span>
        <span className="flexItem">3</span>
        <span className="flexItem">4</span>
      </div>


      <h2>flexDirection: row</h2>
      <div className="flexBox row">
        <span className="flexItem">1</span>
        <span className="flexItem">2</span>
        <span className="flexItem">3</span>
        <span className="flexItem">4</span>
      </div>

      <h2>flexDirection: row-reverse</h2>
      <div className="flexBox row-reverse">
        <span className="flexItem">1</span>
        <span className="flexItem">2</span>
        <span className="flexItem">3</span>
        <span className="flexItem">4</span>
      </div>
    </div>
  )
}

export default FlexBoxDirection